<template>
    <div>
        <home-header></home-header>
        <home-swiper :list="swiperList"></home-swiper>
        <home-icon :list="iconList"></home-icon>
        <home-recommend :list="recommendList"></home-recommend>
        <home-weekend :list="weekendList"></home-weekend>
    </div>
</template>

<script>
import HomeHeader from "./components/Header";
import HomeSwiper from "./components/Swiper";
import HomeIcon from "./components/Icons";
import HomeRecommend from "./components/Recommend";
import HomeWeekend from "./components/Weekend";
// 发送 ajax 请求
import axios from "axios";
import {mapState} from 'vuex'
export default {
  name: "Home",
  components: {
    HomeHeader,
    HomeSwiper,
    HomeIcon,
    HomeRecommend,
    HomeWeekend
  },
  data() {
    return {
      lastCity:'',
      swiperList: [],
      iconList: [],
      recommendList: [],
      weekendList: []
    };
  },
  computed:{
    ...mapState(['city'])
  },
  methods: {
    getHomeInfor() {
      axios
        .get("/api/index.json?city=" + this.city)
        .then(this.getHomeSuccCity)
        .catch(res => {
          console.log(res);
        });
      axios
        .get("/api/city.json")
        .then(this.getHomeSuccSwiper)
        .catch(res => {
          console.log(res);
        });
    },
    getHomeSuccCity: function(res) {
      res = res.data;
      console.log("轮播图数据", res);
      if (res.ret && res.data) {
        const data = res.data;
        this.swiperList = data.swiperList;
        this.iconList = data.iconList;
        this.recommendList = data.recommendList;
        this.weekendList = data.weekendList;
      }
    },
    getHomeSuccSwiper: function(res) {
      res = res.data;
      console.log("城市数据", res);
      /*if (res.ret && res.data) {
        const data = res.data;
        console.log(data.hotCities);
        for (const key in data.hotCities) {
          // console.log(data.hotCities[key].name);
          this.city = data.hotCities[0].name;
        }
      }*/
    }
  },
  mounted() {
    this.lastCity = this.city
    this.getHomeInfor()
  },
  activated (){
    if(this.lastCity !== this.city){
      this.lastCity = this.city
      this.getHomeInfor()
    }
  }

};
</script>

<style>
</style>
